<!-- 微博输入框 -->
<div class="margin-bottom-10 padding-bottom-10 border-bottom">
  <textarea class="form-control" id="text-content" rows="3"></textarea>
  <div class="margin-top-10">
    <button class="btn btn-primary" id="btn-submit">发表</button>
    &nbsp;
    <a href="#" id="btn-add-img">
      <i class="fa fa-picture-o"></i>
      插入一张图片
    </a>
    <input type="file" accept="image/*" id="file-picture" style="display: none;">
    <input type="hidden" id="input-img-url">
    &nbsp;
    <span id="span-img-name"></span>
  </div>
</div>

<script>
$(function () {
  var $spanImgName = $('#span-img-name')
  var $inputImgUrl = $('#input-img-url')
  var $textContent = $('#text-content')
  var $filePicture = $('#file-picture')

  // 上传图片
  $filePicture.change(function (e) {
    var file = $filePicture[0].files[0]
    $spanImgName.text(file.name)
    ajax.upload('/api/utils/upload', file, function(err, data) {
      if (err) {
        alert(err)
        return
      }
      // 成功
      $inputImgUrl.val(data.url)
    })
  })

  // 插入图片
  $('#btn-add-img').click(function (e) {
    e.preventDefault()
    //  开始选择图片
    $filePicture.click()
  })

  // 发布微博
  $('#btn-submit').click(function () {
    var content = $textContent.val().trim()
    var imgUrl = $inputImgUrl.val() || ''

    // 验证
    if (content.length === 0) {
      alert('请输入微博内容')
      return
    }

    // 发布
    ajax.post('/api/blog/create', {
      content: content,
      image: imgUrl
    }, function (err) {
      if (err) {
        // 失败
        alert(err)
        return
      }
      // 成功
      $filePicture.val('')
      $spanImgName.text('')
      $textContent.val('')
      $inputImgUrl.val('')

      // 刷新页面
      location.href = location.pathname
    })
  })
  // @ 功能
  $textContent.atwho({
    at: '@',
    data: '/api/user/getAtList'
    // data: ['Peter', 'Tom', 'Anne']
  })
})
</script>